"use client";
import { usePathname } from "next/navigation";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "./ui/breadcrumb";
// 路径到中文文本的映射对象;
const pathToString = (path: string) => {
  const pathString = [
    "dashboard",
    "operation",
    "safety-quality",
    "admin-mgmt",
    "training",
    "flight-schedule",
  ];
  const chineseString = [
    "首页",
    "生产运行",
    "安全质量",
    "行政管理",
    "培训",
    "航班动态",
  ];
  const mapping: { [key: string]: string } = {};
  for (let i = 0; i < pathString.length; i++) {
    mapping[pathString[i]] = chineseString[i];
  }
  return mapping[path];
};
const AppBreadcrumb = () => {
  const pathname = usePathname();
  const paths = pathname.split("/").filter((p) => p);
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {paths.map((p, i) => (
          <div key={i} className="flex">
            <BreadcrumbItem key={i}>
              <BreadcrumbLink
                href={"/" + paths.slice(0, i + 1).join("/")}
                className="text-center"
              >
                {pathToString(p)}
              </BreadcrumbLink>
            </BreadcrumbItem>
            {i !== paths.length - 1 ? (
              <BreadcrumbSeparator className="hidden md:block content-center" />
            ) : null}
          </div>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  );
};

export default AppBreadcrumb;
